<template>
  <div class="search-container">
    <h1>Whois信息查询</h1>
    <el-form :model="queryForm">
      <el-form-item>
        <el-input v-model="queryForm.domain" placeholder="输入域名一键查询" />
      </el-form-item>
      <el-button
        class="w-full mt-4"
        size="default"
        type="primary"
        :loading="loading"
        @click="onQuery"
      >查询</el-button>
    </el-form>
    <el-divider />
    <div v-if="resultVisiable" class="result-container">
      <el-descriptions
        class="margin-top"
        :title="queryForm.domain + '  查询结果'"
        :column="3"
        border
      >
        <el-descriptions-item
          v-for="(desc, key) in resultKeys"
          :key="key"
        >
          <template slot="label">
            <i class="el-icon-user" />
            {{ desc }}
          </template>
          {{ tableData[key] }}
        </el-descriptions-item>
      </el-descriptions>
    </div>
  </div>
</template>

<script>
import { searchWhois } from '@/api/search/index'

export default {
  name: 'SearchWhois',
  data: function() {
    return {
      loading: false,
      resultVisiable: false,
      tableData: [],
      queryForm: {
        'domain': 'sina.com'
      },
      resultKeys: {
        'Domain Name': '域名',
        'Registry Domain ID': '注册域名ID',
        'Registrar WHOIS Server': 'WHOIS Server',
        'Registrar URL': '注册商URL',
        'Updated Date': '更新日期',
        'Creation Date': '注册日期',
        'Registry Expiry Date': '有效日期',
        'Registrar': '注册商',
        'Registrar Abuse Contact Email': '联系邮箱',
        'Registrar Abuse Contact Phone': '联系电话',
        'Domain Status': '状态',
        'Name Server': '解析服务器'
      }
    }
  },
  methods: {
    onQuery: function() {
      this.resultVisiable = false
      this.loading = true
      console.log(this.queryForm.domain)
      searchWhois(this.queryForm.domain).then(resp => {
        this.tableData = resp.data
        console.log(resp)
        this.resultVisiable = true
        this.loading = false
      })
    }
  }
}

</script>

<style scoped>
h1,
h3 {
  margin-top: 20px;
  margin-bottom: 10px;
  text-align: center;
}
.search-container{
  margin:30px;
}
.result-container {
  padding: 5px 20px 10px;
  background-color: white;
}
</style>
